<template>
<div>
  <!-- 面包削 -->
  <el-breadcrumb>
      <el-breadcrumb-item :to = "{path:'/home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 卡片视图 -->
  <el-card>
      <!-- 搜索页面 -->
      <el-row :gutter="20">
        <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
        <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
    </el-input>
          </el-col>
          <el-col :span="4">
              <el-button type="primary" @click="goAddpage" >添加商品</el-button>
          </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="goodsList" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column label="商品名称" prop="goods_name"></el-table-column>
          <el-table-column label="商品价格(元)" prop="goods_price" width="95px"></el-table-column>
          <el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
          <el-table-column label="创建时间" prop="add_time"  width="140px">
              <template slot-scope="scope" >
                  {{scope.row.add_time | dateFormat}}
              </template>
          </el-table-column>
          <el-table-column label="操作" width="145px">
              <template slot-scope="scope">
                  <el-button type="primary" size="mini" icon="edit">编辑</el-button>
                  <el-button type="danger" size="mini" icon="delete" @click="removeById(scope.row)">删除</el-button>

              </template>
          </el-table-column>
      </el-table>
      <!-- 分页导航条 -->
       <el-pagination
      @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 30]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

  </el-card>

</div>


</template>

<script>
export default {
   data(){
       return {
        //    查询数据库中GOODLIST数据
           queryInfo:{
               query:' ',
               pagenum:1,
               pagesize:10
           },
            //   GOODLIST数据 
            goodsList:[],
            total:0,


       }
   },
   created(){
       this.getGoodsList()

   },
   computed:{

   },
   methods:{
    //    获取商品列表
      async getGoodsList(){
          const {data : res } = await this.$http.get(`goods` , {
              params:this.queryInfo})
         
          if(res.meta.status !== 200) return this.$message.error('获取失败')
          this.goodsList = res.data.goods
          this.total = res.data.total
          console.log(this.goodsList)},

//    分页导航条
   handleSizeChange(newSize){
       this.queryInfo.pagesize = newSize
       this.getGoodsList()
   },
   handleCurrentChange(newPage){
       this.queryInfo.pagenum = newPage
       this.getGoodsList()
   },
//    删除按钮的实现
   async removeById(id){
       const comfirmResulf = await this.$confirm('你是否删除当前属性',`提示`,{
            confirmButtonText:'确定',
            confirmCancelText:'取消',
            type:'warning'
        }).catch(err => err)
        if(comfirmResulf !== 'confirm'){
            return this.$message.info('取消删除')
        }
       const {data : res} = await this.$http.delete(`goods/${id.goods_id}`)
       if(res.meta.status !== 200){
           return this.$message.error('删除失败')
       }this.$message.success('删除成功')
       this.getGoodsList()
    },
    // 转跳页面
    goAddpage(){
        this.$router.push(`/goods/add`)
    }

   },



}
</script>

<style scoped lang ="less">

</style>